Skip to main content

.icon-hamburger-1 svg.icon-hamburger { display: block; } .icon-hamburger-1 .fill-color.icon-hamburger { fill: #fff; }.login-button-1 .dropdown-toggle.login-button { display: block; height: 4rem; font-size: 1.6rem; text-transform: uppercase; text-decoration: none; color: #ccc; cursor: pointer; } .login-button-1 .dropdown-toggle.login-button .fill-color.login-button { fill: #999; } .login-button-1 .dropdown-toggle.login-button:active .fill-color.login-button,.login-button-1 .dropdown-toggle.login-button:focus .fill-color.login-button,.login-button-1 .dropdown-toggle.login-button:hover .fill-color.login-button { fill: #fff; } .login-button-1 .active.login-button { border-radius: 1rem 1rem 0 0; background: #333; } .login-button-1 .active.login-button .fill-color.login-button { fill: #fff; } .login-button-1 span.login-button { display: none; font-size: 1.4rem; text-transform: uppercase; color: #999; } .login-button-1 span.login-button a.login-button { color: inherit; text-decoration: none; } .login-button-1 a.login-button:hover,.login-button-1 a.login-button:active,.login-button-1 a.login-button:focus { color: #fff; } @media (min-width: 890px) { .login-button-1 .logged-out-toolbar.login-button { transform: translateY(-.5rem); } .login-button-1 .active.login-button { background: transparent; } .login-button-1 .dropdown-toggle.login-button { display: inline-block; vertical-align: middle; } .login-button-1 span.login-button { display: inline; vertical-align: middle; } }.nav-search-1 input.nav-search:focus { outline: none; } .nav-search-1 button.nav-search { background: none; color: inherit; border: none; font: inherit; cursor: pointer; } .nav-search-1 button.nav-search:focus { outline: none; } .nav-search-1 .search.nav-search { padding-top: 0; margin-right: .5rem; } .nav-search-1 .search.nav-search svg.nav-search { position: relative; top: -5px; right: -3px; fill:; } .nav-search-1 .search-activated.nav-search { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; right: 5rem; bottom: 0; left: 5rem; z-index: 3; padding: 0.5rem 0.2rem; border-radius: 1rem 1rem 0 0; background: #333; } .nav-search-1 .search-inactive.nav-search { display: none; } .nav-search-1 .search-activated.nav-search .highlight.nav-search,.nav-search-1 .search-activated.nav-search .search.nav-search { background: #fff; border-radius: 0.5rem; } .nav-search-1 .search-activated.nav-search .highlight.nav-search { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin: 0 .5rem; } .nav-search-1 .search-activated.nav-search .search.nav-search { height: 100%; padding: 0; margin-right: 0; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .nav-search-1 .search-activated.nav-search .search-field.nav-search { width: 100%; height: 100%; box-sizing: border-box; padding-left: 1rem; border-radius: 0.5rem; border: none; font-size: 1.6rem; text-align: center; } .nav-search-1 .search-activated.nav-search .search-field.nav-search:focus { outline: none; } @keyframes fade-in-nav-search-1 { 0% { opacity: 0; } 100% { opacity: 1; } } .nav-search-1 .fade-in.nav-search { animation: fade-in-nav-search-1 .2s forwards; } @media (min-width: 890px) { .nav-search-1 .search.nav-search svg.nav-search { display: inline; width: 28px; height: 28px; vertical-align: -14px; } .nav-search-1 .search.nav-search path.nav-search { fill: #333; } .nav-search-1 .search-inactive.nav-search,.nav-search-1 .search-activated.nav-search { display: block; position: static; padding: 1.2rem .2rem; background: transparent; } .nav-search-1 .search-activated.nav-search .highlight.nav-search { width: 13rem; height: 2.8rem; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .nav-search-1 .search-activated.nav-search .search-field.nav-search { width: calc(100% - 28px); height: 100%; padding-left: 0; font-size: 1.4rem; text-align: left; } .nav-search-1 .search-activated.nav-search .search.nav-search svg.nav-search { width: 28px; height: 28px; } }.media-button-1 a.media-button { display: inline-block; text-decoration: none; } .media-button-1 .menu-item.media-button { display: inline-flex; width: 100%; padding: 0; font-size: 1.6rem; text-align: left; background: transparent; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .media-button-1 .menu-item.media-button:focus { outline: none; } .media-button-1 .label.media-button { display: inline-block; padding: 0; font-weight: 400; color: #fff; text-align: left; vertical-align: middle; } .media-button-1 .menu-item.media-button > .icon.media-button { display: inline-flex; width: 42px; height: 42px; vertical-align: middle; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .media-button-1 .menu-item.selected.media-button .icon.media-button { background-color: #333; border-radius: 1rem 0 0 1rem; } .media-button-1 .icon.media-button .fill-color.media-button { fill: #999; } .media-button-1 .icon.active.media-button .fill-color.media-button { fill: #fff; } .media-button-1 .donate.media-button .fill-color.media-button { fill: #f00; } @media (min-width: 890px) { .media-button-1 .menu-item.media-button { width: auto; height: 5rem; color: #999; } .media-button-1 .menu-item.media-button:hover,.media-button-1 .menu-item.media-button:active,.media-button-1 .menu-item.media-button:focus { color: #fff; } .media-button-1 .menu-item.media-button:hover .fill-color.media-button,.media-button-1 .menu-item.media-button:active .fill-color.media-button,.media-button-1 .menu-item.media-button:focus .fill-color.media-button { fill: #fff; } .media-button-1 .label.media-button { display: none; } .media-button-1 .label.media-button,.media-button-1 .web.media-button:after { padding-right: 1rem; font-size: 1.3rem; text-transform: uppercase; color: inherit; } .media-button-1 .web.media-button:after { display: none; content: "web"; } .media-button-1 .donate.media-button,.media-button-1 .more.media-button { display: none; } .media-button-1 .menu-item.selected.media-button { background: #474747; } .media-button-1 .menu-item.selected.media-button .label.media-button,.media-button-1 .menu-item.selected.web.media-button:after { color: #fff; } .media-button-1 .menu-item.selected.media-button .icon.media-button { background: transparent; } .media-button-1 .web.selected.media-button .fill-color.media-button { fill: #ffcd27; } .media-button-1 .texts.selected.media-button .fill-color.media-button { fill: #faab3c; } .media-button-1 .video.selected.media-button .fill-color.media-button { fill: #f1644b; } .media-button-1 .audio.selected.media-button .fill-color.media-button { fill: #00adef; } .media-button-1 .software.selected.media-button .fill-color.media-button { fill: #9ecc4f; } .media-button-1 .images.selected.media-button .fill-color.media-button { fill: #aa99c9; } } @media (min-width: 1300px) { .media-button-1 .label.media-button,.media-button-1 .web.media-button:after { display: inline; } .media-button-1 .web.media-button .label.media-button { display: none; } }.media-menu-1 { outline: none; } .media-menu-1 .media-menu.media-menu { position: absolute; z-index: -1; top: -100vh; width: 100%; background-color: #222; margin: 0; overflow: hidden; } .media-menu-1 .media-menu.tx-slide.media-menu { transition-property: top; transition-duration: 0.2s; transition-timing-function: ease; } .media-menu-1 .media-menu.tx-slide.open.media-menu { top: 100%; } .media-menu-1 .media-menu.tx-slide.closed.media-menu { top: -100vh; } .media-menu-1 .media-menu.tx-slide.closed.media-menu { transition-duration: 0.2s; } .media-menu-1 .menu-group.media-menu { position: relative; line-height: normal; } @media (min-width: 890px) { .media-menu-1 .media-menu.media-menu { display: inline-block; position: static; width: auto; height: 5rem; } .media-menu-1 .media-menu.tx-slide.media-menu { transition-property: none; } .media-menu-1 .media-menu.tx-slide.open.media-menu,.media-menu-1 .media-menu.tx-slide.closed.media-menu { top: 0; } .media-menu-1 .menu-group.media-menu { font-size: 0; } }.primary-nav-1 button.primary-nav:focus,.primary-nav-1 a.primary-nav:focus,.primary-nav-1 input.primary-nav:focus { outline: none; } .primary-nav-1 nav.primary-nav { position: relative; display: -ms-grid; display: grid; height: 4rem; grid-template-areas: "hamburger empty search user"; -ms-grid-columns: 4rem minmax(1rem, 100%) 4.3rem 5rem; grid-template-columns: 4rem auto 4.3rem 5rem; -ms-grid-rows: 100%; grid-template-rows: 100%; background: #222; border-bottom: 1px solid #333; } .primary-nav-1 button.primary-nav { background: none; color: inherit; border: none; font: inherit; cursor: pointer; } .primary-nav-1 .link-home.primary-nav { position: absolute; top: 50%; left: 50%; z-index: 2; text-decoration: none; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .primary-nav-1 media-menu.primary-nav { grid-column-start: hamburger-start; grid-column-end: user-end; } .primary-nav-1 .ia-logo.primary-nav { display: block; } .primary-nav-1 .ia-wordmark.primary-nav { display: none; } .primary-nav-1 .hamburger.primary-nav { -ms-grid-row: 1; -ms-grid-column: 1; grid-area: hamburger; padding: 0; } .primary-nav-1 .search-trigger.primary-nav { -ms-grid-row: 1; -ms-grid-column: 3; grid-area: search; position: relative; padding: 0; z-index: 1; width: 100%; text-align: right; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .primary-nav-1 .search-trigger.primary-nav .fill-color.primary-nav { fill: #999; } .primary-nav-1 .search-activated.primary-nav { position: relative; z-index: 3; } .primary-nav-1 .upload.primary-nav { display: none; } .primary-nav-1 .upload.primary-nav span.primary-nav { display: none; } .primary-nav-1 .user-info.primary-nav { -ms-grid-row: 1; -ms-grid-column: 4; grid-area: user; -ms-grid-row-align: stretch; align-self: stretch; -ms-grid-column-align: end; justify-self: end; } .primary-nav-1 .username.primary-nav { display: none; font-size: 1.3rem; vertical-align: middle; text-transform: uppercase; } .primary-nav-1 .user-menu.primary-nav { height: 100%; padding: .5rem 1rem; color: #999; } .primary-nav-1 .user-menu.primary-nav:hover { color: #fff; } .primary-nav-1 .user-menu.active.primary-nav { border-radius: 1rem 1rem 0 0; background: #333; } .primary-nav-1 .user-menu.primary-nav img.primary-nav { display: block; width: 30px; height: 30px; } @media (min-width: 890px) { .primary-nav-1 { ; } .primary-nav-1 nav.primary-nav { display: block; z-index: 2; height: 5rem; padding-right: 1.5rem; } .primary-nav-1 .link-home.primary-nav { position: static; float: left; margin-top: 1rem; padding: 0 10px 0 13px; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .primary-nav-1 .ia-logo.primary-nav,.primary-nav-1 .ia-wordmark.primary-nav { display: inline-block; vertical-align: middle; } .primary-nav-1 .ia-wordmark.primary-nav { margin-left: 1rem; } .primary-nav-1 .hamburger.primary-nav,.primary-nav-1 .search-trigger.primary-nav { display: none; } .primary-nav-1 .user-info.primary-nav { float: right; padding-top: 1rem; } .primary-nav-1 .user-menu.primary-nav { padding-top: 0; } .primary-nav-1 .user-menu.active.primary-nav { background: transparent; } .primary-nav-1 .user-menu.primary-nav img.primary-nav { display: inline-block; vertical-align: middle; } .primary-nav-1 .upload.primary-nav { display: block; float: right; margin-top: 1rem; font-size: 1.4rem; text-transform: uppercase; text-decoration: none; color: #999; } .primary-nav-1 .upload.primary-nav:active,.primary-nav-1 .upload.primary-nav:focus,.primary-nav-1 .upload.primary-nav:hover { color: #fff; } .primary-nav-1 .upload.primary-nav svg.primary-nav { width: 32px; height: 32px; vertical-align: middle; fill: #999; } .primary-nav-1 .upload.primary-nav:hover svg.primary-nav,.primary-nav-1 .upload.primary-nav:focus svg.primary-nav,.primary-nav-1 .upload.primary-nav:active svg.primary-nav { fill: #fff; } .primary-nav-1 nav-search.primary-nav { float: right; margin-left: 1rem; } .primary-nav-1 login-button.primary-nav { display: block; margin-right: 1rem; } } @media (min-width: 990px) { .primary-nav-1 .username.primary-nav { display: inline-block; } .primary-nav-1 .upload.primary-nav span.primary-nav { display: inline; } }.search-menu-1 { ; } .search-menu-1 button.search-menu:focus,.search-menu-1 input.search-menu:focus { outline-color: #428bca; outline-width: 0.16rem; outline-style: auto; } .search-menu-1 .search-menu.search-menu { position: absolute; top: -800px; right: 0; left: 0; z-index: 1; padding: 0 4.5rem; font-size: 1.6rem; background-color: #333; } .search-menu-1 .tx-slide.search-menu { overflow: hidden; transition-property: top; transition-duration: 0.2s; transition-timing-function: ease; } .search-menu-1 .initial.search-menu,.search-menu-1 .closed.search-menu { top: -800px; } .search-menu-1 .closed.search-menu { transition-duration: 0.2s; } .search-menu-1 .open.search-menu { top: 4rem; } .search-menu-1 label.search-menu,.search-menu-1 a.search-menu { padding: 1rem; display: block; } .search-menu-1 .advanced-search.search-menu { text-decoration: none; color: #428bca; } @media (min-width: 890px) { .search-menu-1 .search-menu.search-menu { overflow: visible; top: -400px; right: 2rem; left: auto; z-index: 5; padding: 1rem 2rem; transition: opacity .2s ease-in-out; font-size: 1.4rem; color: #333; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .15); } .search-menu-1 .search-menu.search-menu:after { position: absolute; right: 7px; top: -7px; width: 12px; height: 7px; box-sizing: border-box; color: #fff; content: ""; border-bottom: 7px solid currentColor; border-left: 6px solid transparent; border-right: 6px solid transparent; } .search-menu-1 .initial.search-menu,.search-menu-1 .closed.search-menu { opacity: 0; transition-duration: .2s; } .search-menu-1 .open.search-menu { top: 5.1rem; opacity: 1; } .search-menu-1 label.search-menu { padding: 0; } .search-menu-1 label.search-menu + label.search-menu { padding-top: 7px; } .search-menu-1 a.search-menu { padding: 1rem 0 0 0; } }.media-subnav-1 a.media-subnav { text-decoration: none; color: #fff; } .media-subnav-1 img.media-subnav { display: block; width: 90px; height: 90px; margin: 0 auto 1rem auto; border-radius: 45px; } .media-subnav-1 h3.media-subnav { margin-top: 0; font-size: 1.8rem; } .media-subnav-1 h4.media-subnav { font-size: 1.6rem; } .media-subnav-1 ul.media-subnav { padding: 0; margin: 0; list-style: none; } .media-subnav-1 li.media-subnav + li.media-subnav { padding-top: 1.5rem; } .media-subnav-1 .icon-links.media-subnav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; text-align: center; } .media-subnav-1 .icon-links.media-subnav a.media-subnav { display: inline-block; width: 120px; margin-bottom: 1.5rem; overflow: hidden; white-space: nowrap; text-align: center; text-overflow: ellipsis; } .media-subnav-1 .icon-links.media-subnav a.media-subnav + a.media-subnav { margin-left: 2rem; } .media-subnav-1 .featured.media-subnav h4.media-subnav { display: none; } @media (min-width: 890px) { .media-subnav-1 { display: -ms-grid; display: grid; -ms-grid-columns: 40% 20% 40%; grid-template-columns: 40% 20% 40%; } .media-subnav-1 .wayback-search.media-subnav { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1 / 4; } .media-subnav-1 h3.media-subnav { display: none; } .media-subnav-1 h4.media-subnav { margin: 0 0 1rem 0; font-weight: 100; } .media-subnav-1 ul.media-subnav { font-size: 1.3rem; } .media-subnav-1 li.media-subnav { padding-bottom: .5rem; } .media-subnav-1 li.media-subnav + li.media-subnav { padding-top: 0; } .media-subnav-1 li.media-subnav a.media-subnav { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .media-subnav-1 .icon-links.media-subnav { -ms-grid-column: 1; } .media-subnav-1 .icon-links.media-subnav a.media-subnav { padding-top: 3.5rem; max-width: 160px; } .media-subnav-1 .links.media-subnav { padding: 0 1.5rem; } .media-subnav-1 .featured.media-subnav { -ms-grid-column: 2; } .media-subnav-1 .featured.media-subnav h4.media-subnav { display: block; } .media-subnav-1 .top.media-subnav { -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav { display: -ms-grid; display: grid; -ms-grid-columns: 50% 3rem 50%; grid-template-columns: 50% 50%; -ms-grid-rows: (auto)[7]; grid-template-rows: repeat(7, auto); grid-column-gap: 3rem; grid-auto-flow: column; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(2) { -ms-grid-row: 2; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(3) { -ms-grid-row: 3; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(4) { -ms-grid-row: 4; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(5) { -ms-grid-row: 5; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(6) { -ms-grid-row: 6; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(7) { -ms-grid-row: 7; -ms-grid-column: 1; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(8) { -ms-grid-row: 1; -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(9) { -ms-grid-row: 2; -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(10) { -ms-grid-row: 3; -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(11) { -ms-grid-row: 4; -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(12) { -ms-grid-row: 5; -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(13) { -ms-grid-row: 6; -ms-grid-column: 3; } .media-subnav-1 .top.media-subnav ul.media-subnav > *.media-subnav:nth-child(14) { -ms-grid-row: 7; -ms-grid-column: 3; } }.media-slider-1 .overflow-clip.media-slider { display: none; position: absolute; top: 4rem; right: 0; left: 4rem; height: 368px; overflow-x: hidden; } .media-slider-1 .information-menu.media-slider { position: absolute; top: 0; right: 0; left: 0; padding: 0; height: 368px; overflow-x: hidden; font-size: 1.4rem; background: #333; } .media-slider-1 .open.media-slider { display: block; } .media-slider-1 .info-box.media-slider { padding: 1rem; } @media (min-width: 890px) { .media-slider-1 .overflow-clip.media-slider { display: block; top: 0; left: 0; height: auto; overflow-x: visible; transform: translate(0, -100%); transition: transform .2s ease; } .media-slider-1 .information-menu.media-slider { left: 0; z-index: 1; height: auto; min-height: 21rem; background: #474747; transform: translate(0, -100%); transition: transform .2s ease; } .media-slider-1 .overflow-clip.open.media-slider { transform: translate(0, 8rem); } .media-slider-1 .information-menu.open.media-slider { transform: translate(0, 0); } .media-slider-1 .info-box.media-slider { max-width: 1000px; padding: 1.5rem 0; margin: 0 auto; } }.desktop-subnav-1 ul.desktop-subnav { position: relative; z-index: 3; padding: .8rem 0; margin: 0; font-size: 1.2rem; text-transform: uppercase; text-align: center; background: #333; } .desktop-subnav-1 li.desktop-subnav { display: inline-block; padding: 0 15px; } .desktop-subnav-1 a.desktop-subnav { text-decoration: none; color: #aaa; } .desktop-subnav-1 a.desktop-subnav:hover,.desktop-subnav-1 a.desktop-subnav:active,.desktop-subnav-1 a.desktop-subnav:focus { color: #fff; } .desktop-subnav-1 .donate.desktop-subnav svg.desktop-subnav { width: 16px; height: 16px; vertical-align: -4px; fill: #f00; }.signed-out-dropdown-1 { ; } .signed-out-dropdown-1 nav.signed-out-dropdown { position: absolute; top: -1500px; right: 0; z-index: 1; overflow: hidden; font-size: 1.6rem; background-color: #333; transition-property: top; transition-duration: 0.2s; transition-timing-function: ease; } .signed-out-dropdown-1 .initial.signed-out-dropdown,.signed-out-dropdown-1 .closed.signed-out-dropdown { top: -1500px; } .signed-out-dropdown-1 .closed.signed-out-dropdown { transition-duration: 0.5s; } .signed-out-dropdown-1 .open.signed-out-dropdown { top: 4rem; max-width: 100vw; overflow: auto; } .signed-out-dropdown-1 h3.signed-out-dropdown { padding: 0.6rem 2rem; margin: 0; font-size: inherit; overflow: hidden; text-overflow: ellipsis; } .signed-out-dropdown-1 ul.signed-out-dropdown { padding: 0.4rem 0 0.7rem 0; margin: 0; list-style: none; max-height: calc(100vh - 7.2rem + 1px); overflow: auto; box-sizing: border-box; } .signed-out-dropdown-1 .divider.signed-out-dropdown { margin: .5rem 0; border-bottom: 1px solid #666; } .signed-out-dropdown-1 a.signed-out-dropdown,.signed-out-dropdown-1 .info-item.signed-out-dropdown { display: block; color: #fff; text-decoration: none; padding: 1rem 2rem; } .signed-out-dropdown-1 .info-item.signed-out-dropdown { font-size: .8em; color: #999; } @media (min-width: 890px) { .signed-out-dropdown-1 nav.signed-out-dropdown { overflow: visible; top: calc(100% + 7px); left: auto; z-index: 5; transition: opacity .2s ease-in-out; font-size: 1.4rem; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px 1px rgba(0, 0, 0, .15); } .signed-out-dropdown-1 nav.signed-out-dropdown:after { position: absolute; right: 7px; top: -7px; width: 12px; height: 7px; box-sizing: border-box; color: #fff; content: ""; border-bottom: 7px solid currentColor; border-left: 6px solid transparent; border-right: 6px solid transparent; } .signed-out-dropdown-1 h3.signed-out-dropdown { display: none; } .signed-out-dropdown-1 ul.signed-out-dropdown { max-height: calc(100vh - 8.5rem + 1px); } .signed-out-dropdown-1 .divider.signed-out-dropdown { border-bottom-color: #666; } .signed-out-dropdown-1 a.signed-out-dropdown { padding: .5rem 2rem; color: #333; transition: background .1s ease-out, color .1s ease-out; } .signed-out-dropdown-1 .info-item.signed-out-dropdown { padding: .5rem 2rem; font-size: .8em; } .signed-out-dropdown-1 a.signed-out-dropdown:hover,.signed-out-dropdown-1 a.signed-out-dropdown:active,.signed-out-dropdown-1 a.signed-out-dropdown:focus { color: #fff; background: #428bca; } .signed-out-dropdown-1 .initial.signed-out-dropdown,.signed-out-dropdown-1 .closed.signed-out-dropdown { opacity: 0; transition-duration: .2s; } .signed-out-dropdown-1 .open.signed-out-dropdown { top: 5.1rem; opacity: 1; overflow: visible; } } @media (min-width: 890px) { .signed-out-dropdown-1 .initial.signed-out-dropdown,.signed-out-dropdown-1 .closed.signed-out-dropdown,.signed-out-dropdown-1 .open.signed-out-dropdown { right: 33.7rem; } .signed-out-dropdown-1 .search-hidden.initial.signed-out-dropdown,.signed-out-dropdown-1 .search-hidden.closed.signed-out-dropdown,.signed-out-dropdown-1 .search-hidden.open.signed-out-dropdown { right: 18.3rem; } } @media (min-width: 990px) { .signed-out-dropdown-1 .initial.signed-out-dropdown,.signed-out-dropdown-1 .closed.signed-out-dropdown,.signed-out-dropdown-1 .open.signed-out-dropdown { right: 39.7rem; } .signed-out-dropdown-1 .search-hidden.initial.signed-out-dropdown,.signed-out-dropdown-1 .search-hidden.closed.signed-out-dropdown,.signed-out-dropdown-1 .search-hidden.open.signed-out-dropdown { right: 23.5rem; } }.ia-topnav-1 { ; color: #fff; font-size: 2rem; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .ia-topnav-1 #close-layer.ia-topnav { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .ia-topnav-1 #close-layer.visible.ia-topnav { display: block; } .ia-topnav-1 .topnav.ia-topnav { position: relative; z-index: 3; } @media (max-width: 889px) { .ia-topnav-1 desktop-subnav.ia-topnav { display: none; } }body {transition: opacity ease-in 0.2s; } body[unresolved] {opacity: 0; display: block; overflow: hidden; position: relative; }

Internet Archive's in-browser video player requires JavaScript to be enabled. It appears your browser does not have it turned on. Please see your browser settings for this feature.

Rotating and zooming HTML5 video with CSS3

by: Christian Heilmann

Usage: Attribution 3.0

Topics: css3, html5, video

A quick demo of how you can use CSS3 transformations to rotate and zoom video in a browser.

Addeddate: 2011-01-18 17:12:42

Ia_orig__runtime: 51 seconds

Identifier: RotatingAndZoomingHtml5VideoWithCss3

Run time: 0:51

Sound: sound

plus-circle Add Review

comment
Reviews

There are no reviews yet. Be the first one to write a review.

108,292 Views

1 Favorite

DOWNLOAD OPTIONS

512KB MPEG4

ITEM TILE

MPEG4

OGG VIDEO

TORRENT

20 Files
6 Original

SHOW ALL

IN COLLECTIONS

Community Video

Uploaded by Christian Heilmann on January 18, 2011

SIMILAR ITEMS (based on metadata)

Terms of Service (last updated 12/31/2014)